[No QA] Unify avatar sizes by jmusial · Pull Request #95275 · Expensify/App

jmusial · 2026-07-03T12:34:55Z

Explanation of Change

Replaces the legacy ad-hoc avatar sizes (SMALL_NORMAL, HEADER, LARGE_BORDERED, …) with a linear xxxx-small (12px) → xxxx-large (100px) scale backed by centralized tokens and exhaustive style maps. Unifies how avatar borders are handled.

Visual changes

None - all sizes are pixel-identical. The two spots where new defaults would have differed (subscript border on 100px avatars, workspace avatar radius in RoomHeaderAvatars) keep their old values explicitly. (AttendeesCell's stacked-row container now includes the avatar border in its height for consistency with other stacks — layout-neutral, row height is padding-driven.)

Dead code

Removed HeaderView's 32px SMALL_NORMAL subscript branch — unreachable, since ReportHeader sends all expense-request reports to MoneyRequestHeader first.

Fixed Issues

$ #95598

PROPOSAL:
Coming from this thread

Tests

Refactor mostly without impact for the user, some basic tests:

Open app
Navigate through pages, verify that avatar sizes are the same as on prod/staging.

Offline tests

Same as tests

QA Steps

N/A

PR Author Checklist

Screenshots/Videos

MacOS: Chrome / Safari

Screen.Recording.2026-07-07.at.16.34.32.mov

jmusial · 2026-07-03T12:48:54Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 0787653f3d

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

codecov · 2026-07-03T14:35:38Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/CONST/index.ts	`94.81% <ø> (ø)`
src/components/AccountManagerBookCallButton.tsx	`100.00% <ø> (ø)`
src/components/AvatarButtonWithIcon.tsx	`100.00% <ø> (ø)`
src/components/AvatarSelector.tsx	`100.00% <100.00%> (ø)`
src/components/HeaderWithBackButton/index.tsx	`89.21% <ø> (ø)`
src/components/ImportedFromAccountingSoftware.tsx	`0.00% <ø> (ø)`
src/components/OnboardingHelpDropdownButton.tsx	`95.65% <100.00%> (+0.41%)`	⬆️
src/components/ReceiptEmptyState.tsx	`97.67% <100.00%> (+0.05%)`	⬆️
src/components/ReportActionItem/TaskView.tsx	`85.71% <ø> (ø)`
...m/TransactionPreview/TransactionPreviewContent.tsx	`79.83% <ø> (ø)`
... and 50 more
... and 14 files with indirect coverage changes

jmusial · 2026-07-03T14:36:17Z

@codex review

chatgpt-codex-connector · 2026-07-03T14:43:49Z

Codex Review: Didn't find any major issues. Hooray!

Reviewed commit: 6b060a8646

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

jmusial · 2026-07-24T10:45:48Z

@codex review

chatgpt-codex-connector · 2026-07-24T10:55:44Z

Codex Review: Didn't find any major issues. Keep it up!

Reviewed commit: 9edb8b62f6

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

melvin-bot · 2026-07-24T11:35:02Z

@ChavdaSachin Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

jmusial · 2026-07-24T11:38:14Z

cc. @roryabraham the unification of Avatar sizes. also cc @Expensify/design as this came of our discussion.
There should not be any user noticeable changes.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 79b05124e1

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-07-24T11:44:30Z

        <ReportActionAvatars
            reportID={report?.reportID}
-            size={shouldShowSubscript ? defaultSubscriptSize : undefined}
            singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]}


Restore the fallback 32px expense-thread avatar size

When an expense-request thread is opened before its parent report action collection is available, ReportHeader computes isReportTransactionThread(report) as false and mounts HeaderView; ReportHeader does not subscribe to that parent action, while HeaderView does via useParentReportAction, so this component can stay mounted after shouldReportShowSubscript() becomes true. Without the removed isExpenseRequest(report) size override, those direct/deeplinked expense-thread headers render the subscript avatar at the default 40px size instead of the previous 32px size, causing a visible header layout regression. Please keep the 32px mapping here or make the header variant selection reactive to the parent action.

Useful? React with 👍 / 👎.

Removing 32px size is intentional per comment here

joekaufmanexpensify

Good for product.

roryabraham

Overall huge fan of this change. It's definitely bit tricky to sort through, so thank you for doing it! Much more orderly now.

roryabraham · 2026-07-25T00:34:53Z

@ChavdaSachin awaiting C+ review on this PR

…zes-v2

roryabraham · 2026-07-28T07:09:40Z

Back to you @ChavdaSachin

ChavdaSachin

LGTM! ✅

ChavdaSachin · 2026-07-29T04:04:16Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
I verified tests pass on all platforms & I tested again on:
- Android: HybridApp
- Android: mWeb Chrome
- iOS: HybridApp
- iOS: mWeb Safari
- MacOS: Chrome / Safari
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp

Android: mWeb Chrome

iOS: HybridApp

iOS: mWeb Safari

MacOS: Chrome / Safari

ChavdaSachin · 2026-07-29T04:26:29Z

Something is broken on the latest main branch, due to which the avatar for the expense reports isn't loading....
Waiting for that to be resolved...

jmusial · 2026-07-29T14:32:58Z

Something is broken on the latest main branch, due to which the avatar for the expense reports isn't loading.... Waiting for that to be resolved...

merged latest, I think it's ok now (seems normal for me)

roryabraham · 2026-07-29T17:58:43Z

Awaiting @ChavdaSachin to complete the checklist

Unify avatar sizes

82b54cd

melvin-bot Bot assigned jmusial Jul 3, 2026

Merge branch 'main' into chore/unify-avatar-sizes-v2

0787653

chatgpt-codex-connector Bot reviewed Jul 3, 2026

View reviewed changes

Comment thread src/styles/utils/index.ts

Comment thread src/pages/iou/request/step/IOURequestStepScan/hooks/useReceiptPreviewsSizes.ts

fix mock

6b060a8

Merge branch 'main' into chore/unify-avatar-sizes-v2

e44fb4c

jmusial changed the title ~~Unify avatar sizes~~ [No QA] Unify avatar sizes Jul 7, 2026

This was referenced Jul 8, 2026

[Tracking] Decompose Avatar component #95596

Open

[M2] Unify avatar sizes #95598

Open

jmusial mentioned this pull request Jul 9, 2026

Chore/unify avatar sizes #94949

Closed

43 tasks

jmusial added 7 commits July 9, 2026 14:00

Merge branch 'main' into chore/unify-avatar-sizes-v2

88fa3f4

unify bordering of avatars

d636309

cleanup unrelated stylistic changes

39157d8

remove doubled size declarations

07ad0b6

Merge branch 'main' into chore/unify-avatar-sizes-v2

f031316

fix typecheck

0e2aa27

self review

9edb8b6

fix knip

79b0512

jmusial marked this pull request as ready for review July 24, 2026 11:34

jmusial requested review from a team as code owners July 24, 2026 11:34

melvin-bot Bot requested review from ChavdaSachin and removed request for a team July 24, 2026 11:35

melvin-bot Bot requested review from joekaufmanexpensify and removed request for a team July 24, 2026 11:35

github-actions Bot reviewed Jul 24, 2026

View reviewed changes

Comment thread src/components/ReportActionAvatars/ReportActionAvatar.tsx Outdated

chatgpt-codex-connector Bot reviewed Jul 24, 2026

View reviewed changes

apply ai reviewer fix

4302193

joekaufmanexpensify previously approved these changes Jul 24, 2026

View reviewed changes

roryabraham previously approved these changes Jul 25, 2026

View reviewed changes

Comment thread src/styles/utils/index.ts Outdated

Comment thread src/styles/utils/index.ts Outdated

Comment thread src/styles/variables.ts Outdated

ChavdaSachin suggested changes Jul 25, 2026

View reviewed changes

Comment thread src/styles/index.ts Outdated

Merge remote-tracking branch 'origin/main' into chore/unify-avatar-si…

fe7e20c

…zes-v2

jmusial dismissed stale reviews from roryabraham and joekaufmanexpensify via fe7e20c July 27, 2026 09:53

review updates & cleanup after new avatars introduced

d55e80e

roryabraham previously approved these changes Jul 28, 2026

View reviewed changes

ChavdaSachin approved these changes Jul 29, 2026

View reviewed changes

melvin-bot Bot requested a review from roryabraham July 29, 2026 04:04

Merge branch 'main' into chore/unify-avatar-sizes-v2

6bc82f5

jmusial dismissed roryabraham’s stale review via 6bc82f5 July 29, 2026 14:29

roryabraham mentioned this pull request Jul 29, 2026

ReportActionAvatars — Layer 1 primitives + IconsAvatar #94682

Open

41 tasks

Uh oh!

Conversation

jmusial commented Jul 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Visual changes

Dead code

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

jmusial commented Jul 3, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

codecov Bot commented Jul 3, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

jmusial commented Jul 3, 2026

Uh oh!

chatgpt-codex-connector Bot commented Jul 3, 2026

Uh oh!

jmusial commented Jul 24, 2026

Uh oh!

chatgpt-codex-connector Bot commented Jul 24, 2026

Uh oh!

melvin-bot Bot commented Jul 24, 2026

Uh oh!

jmusial commented Jul 24, 2026

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jul 24, 2026

Choose a reason for hiding this comment

Uh oh!

jmusial Jul 24, 2026

Choose a reason for hiding this comment

Uh oh!

joekaufmanexpensify left a comment

Choose a reason for hiding this comment

Uh oh!

roryabraham left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

roryabraham commented Jul 25, 2026

Uh oh!

Uh oh!

roryabraham commented Jul 28, 2026

Uh oh!

ChavdaSachin left a comment

Choose a reason for hiding this comment

Uh oh!

ChavdaSachin commented Jul 29, 2026

Reviewer Checklist

Screenshots/Videos

Uh oh!

ChavdaSachin commented Jul 29, 2026

Uh oh!

jmusial commented Jul 29, 2026

Uh oh!

roryabraham commented Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

jmusial commented Jul 3, 2026 •

edited

Loading

codecov Bot commented Jul 3, 2026 •

edited by github-actions Bot

Loading

roryabraham commented Jul 29, 2026 •

edited

Loading